<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>文字排版与装饰</title>
    <style type="text/css">
      .min {
        background: goldenrod;
        width: min-content;
      }
      .max {
        background: goldenrod;
        width: max-content;
      }
      .break1 {
        word-break: keep-all;
      }
      .break2 {
        word-break: break-all;
      }
      .text-decoration {
        text-decoration: underline wavy red 3px;
        text-underline-position: under;
      }
    </style>
  </head>
  <body>
    <a href="./6-text-align增强.html">上一篇</a>
    <a href="./8-background增强.html">下一篇</a>
    <br />
    以下所有例子，无相关设置的在前，设置的在后
    <br />
    word-break:keep-all（设置最小宽度）:
    <p class="min">中文的排版</p>
    <p class="min break1">中文的排版</p>

    word-break:break-all（设置最小宽度）:
    <p class="min">english-word</p>
    <p class="min break2">english-word</p>
    <br />
    <br />
    <br />
    text-decoration
    <br />
    字符装饰。如今是text-decoration-line/text-decoration-style/text-decoration-color/text-decoration-thickness的缩写
    <br />
    可以随意组合，但最好分开写，兼容不好
    <br />
    text-underline-position可以调整位置
    <br />
    <br />
    <br />
    <div class="text-decoration">这里是一些字</div>
  </body>
</html>
